<template>
	<!-- 添加身份证 -->
	<view class="bigbox">
		<view class="boxr pl12 pr12 pb40">
			<u-form :model="form" ref="uForm" label-width="200" border-bottom>
				<u-form-item label="真实姓名">
					<u-input v-model="form.name" placeholder="请填写您的真实姓名" input-align='right' />
				</u-form-item>
				<u-form-item label="身份证号码">
					<u-input v-model="form.id_card" placeholder="请填写您的身份证件号码" input-align='right' />
				</u-form-item>
			</u-form>

			<view class="mt40">
				<view class="">
					上传身份证正反面信息
				</view>
				<!-- 上传身份证照片的盒子 -->
				<view class="flex row-around mt50">
					<view class="text-center " @tap="uploadImg('front')">
						<image :src="idf" class="w300 h170"></image>
						<text>身份证正面</text>
					</view>
					<view class="text-center" @tap="uploadImg('back')">
						<image :src="idb" class="w300 h170"></image>
						<text>身份证反面</text>
					</view>
				</view>

				<view class="mr56 h86 paybtn" @tap="submit">
					立即提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					id_card: '',
					positive_image:'',
					other_image:''
				},
				idf:'/static/img/my/5idcard-zheng.png',
				idb:'/static/img/my/5idcard-fan.png',
			};
		},
		onLoad(opt) {
			if(opt.detail){
				this.form = JSON.parse(opt.detail)
				this.idf = this.$baseUrl + this.form.positive_image
				this.idb = this.$baseUrl + this.form.other_image
			}
		},
		methods:{
			uploadImg(type) {
				this.$tool.upload().then(res => {
					if (type === 'front') {
						this.idf = res.data.fullurl;
						this.form.positive_image = res.data.url;
					} else if (type === 'back') {
						this.idb = res.data.fullurl;
						this.form.other_image = res.data.url;
					} 
					
				})
			},
			submit(){
				this.$api.addIdNumber(this.form).then(res => {
					this.$msg(res.msg);
					if(res.code == 1){
						setTimeout(()=>{
							uni.navigateBack();
						}, 1000)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.paybtn {
		width: 80%;
		position: fixed;
		left: 50%;
		bottom: 40rpx;
		transform: translateX(-50%);
		text-align: center;
		line-height: 86rpx;
		background: #1385FF;
		border-radius: 10rpx;
		color: #FFFFFF;
		z-index: 99;
	}
</style>
